body {
  @apply bg-white text-black;
  @apply dark:bg-zinc-950 dark:text-white;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  font-family:
    ui-sans-serif,
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
}

body,
body > * {
  transition:
    color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
    background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.border-color {
  @apply border-neutral-300 dark:border-neutral-700;
}

.inout-leave-active,
.inout-enter-active {
  transition:
    translate 0.24s cubic-bezier(0.3, 1, 0.5, 1),
    opacity 0.24s cubic-bezier(0, 0.8, 0.55, 1);
}

.inout-enter-active {
  transition-delay: 0.24s;
}

.inout-leave-active {
  /* background:pink; */
}

.inout-enter-from,
.inout-leave-to {
  opacity: 0;
  translate: 0 2rem;
}

.inout-enter-to,
.inout-leave-from {
  opacity: 1;
  translate: 0;
}

.no-arrows {
  /* For Chrome, Safari, Edge, Opera */
  -webkit-appearance: none;
  margin: 0;
  /* For Firefox */
  -moz-appearance: textfield;
}

.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Primevue */

:root {
  --primary-50: 239 246 255;
  --primary-100: 219 234 254;
  --primary-200: 191 219 254;
  --primary-300: 147 197 253;
  --primary-400: 96 165 250;
  --primary-500: 59 130 246;
  --primary-600: 37 99 235;
  --primary-700: 29 78 216;
  --primary-800: 30 64 175;
  --primary-900: 30 58 138;
  --primary-950: 23 37 84;
  /* --primary-50: 255 255 255;
  --primary-100: 244 244 245;
  --primary-200: 244 244 245;
  --primary-300: 244 244 245;
  --primary-400: 244 244 245;
  --primary-500: 244 244 245;
  --primary-600: 9 9 11;
  --primary-700: 9 9 11;
  --primary-800: 9 9 11;
  --primary-900: 9 9 11;
  --primary-950: 9 9 11; */
  --surface-0: 255 255 255;
  --surface-50: 250 250 250;
  --surface-100: 244 244 245;
  --surface-200: 228 228 231;
  --surface-300: 212 212 216;
  --surface-400: 161 161 170;
  --surface-500: 113 113 122;
  --surface-600: 82 82 91;
  --surface-700: 63 63 70;
  --surface-800: 39 39 42;
  --surface-900: 24 24 27;
  --surface-950: 9 9 11;

  --primary: var(--primary-500);
  --primary-inverse: var(--surface-0);
  --primary-hover: var(--primary-600);
  --primary-active-color: var(--primary-600);

  --primary-highlight-opacity: 0.1;
  --primary-highlight-inverse: var(--primary-700);
  --primary-highlight-hover-opacity: 0.2;
}
.dark {
  --primary: var(--primary-400);
  --primary-inverse: var(--surface-900);
  --primary-hover: var(--primary-300);
  --primary-active-color: var(--primary-300);

  --primary-highlight-opacity: 0.2;
  --primary-highlight-inverse: var(--surface-0);
  --primary-highlight-hover-opacity: 0.3;
}

.customized-primary {
  &:not(.dark) {
    --primary: var(--primary-950);
    --primary-inverse: var(--surface-0);
    --primary-hover: var(--primary-800);
    --primary-active-color: var(--primary-900);

    --primary-highlight-opacity: 1;
    --primary-highlight-inverse: var(--surface-0);
    --primary-highlight-hover-opacity: 0.8;
  }
  &.dark {
    --primary: var(--primary-50);
    --primary-inverse: var(--surface-950);
    --primary-hover: var(--primary-100);
    --primary-active-color: var(--primary-100);

    --primary-highlight-opacity: 0.1;
    --primary-highlight-inverse: var(--surface-0);
    --primary-highlight-hover-opacity: 0.2;
  }
}
